<template>
  <div class="app-container">
    <el-row>
      <el-button icon="Plus" type="warning" @click="handleAdd" class="mb10">新增通道</el-button>
    </el-row>
    <el-table :data="tableData">
      <el-table-column type="expand">
        <template #default="props">
          <h3>授权的商户列表</h3>
          <el-table :data="props.row.merchantList" style="width: 60%">
            <el-table-column prop="merchantId" label="商户id"></el-table-column>
            <el-table-column prop="merchantNo" label="商户编号"></el-table-column>
            <el-table-column align="center" label="操作">
              <template #default="scope">
                <el-button size="small" type="warning" @click="deleteHandler(scope.row, props.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column align="center" label="展示渠道机构名称" prop="channelName" />
      <!-- <el-table-column align="center" label="渠道商户列表">
      <template #default="scope" prop="merchantList">
        <el-table :data="scope.row.merchantList" style="width: 100%">
          <el-table-column prop="merchantId" label="商户id"></el-table-column>
          <el-table-column prop="merchantNo" label="商户编号"></el-table-column>
        </el-table>
      </template>
    </el-table-column> -->
      <el-table-column align="center" label="渠道机构名称" prop="uniName" />
      <el-table-column align="center" label="渠道机构收费率(%)" prop="uniInnerRate" />
      <el-table-column align="center" label="渠道机构付费率(%)" prop="uniOuterRate" />
      <el-table-column align="center" label="渠道状态" prop="useStatusName" />
      <el-table-column align="center" label="收款账户" width="200">
        <template #default="scope">
          <el-button size="small" type="success" plain @click="setAccount(scope.row)">设置</el-button>
          <el-button size="small" type="primary" @click="alreadyHandle(scope.row)">查询</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template #default="scope">
          <el-button size="small" type="warning" plain @click="modifyHandler(scope.row)">修改</el-button>
          <el-button size="small" type="warning" @click="setUse(scope.row)">设置可用商户</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="show" :title=title @close="confirmHandle" width="40%" destroy-on-close>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="展示渠道名称" prop="channelName">
          <el-input style="width: 300px" v-model="form.channelName" placeholder="请输入展示渠道名称"
            :disabled="!!form.uniChannelId" />
        </el-form-item>
        <el-form-item label="渠道名称" prop="uniName">
          <el-input style="width: 300px" v-model="form.uniName" placeholder="请输入渠道名称"
            :disabled="!!form.uniChannelId"></el-input>
        </el-form-item>
        <el-form-item label="渠道收费率(%)" prop="uniInnerRate">
          <el-input style="width: 300px" v-model="form.uniInnerRate" placeholder="请输入收费率(%)" />
        </el-form-item>

        <el-form-item label="渠道付费率(%)" prop="uniOuterRate">
          <el-input style="width: 300px" v-model="form.uniOuterRate" placeholder="请输入付费率(%)"></el-input>
        </el-form-item>
        <el-form-item label="渠道状态" prop="useStatus">
          <el-select class="w-195" v-model="form.useStatus" placeholder="请选择" style="width: 300px" clearable>
            <el-option key="0" label="停用" value="0" />
            <el-option key="1" label="启用" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmHandle">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">提 交</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="setShow" title="设置可用商户">
      <el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="120px">
        <el-form-item label="商户编号" prop="merchantNo">
          <el-input style="width: 300px" v-model="addForm.merchantNo" placeholder="请输入商户编号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmHandle">取消</el-button>
          <el-button type="primary" @click="setHandle"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="accountShow" title="设置账户">
      <el-form label-width="120px">
        <el-form-item label="账户">
          <el-select class="w-195" multiple v-model="aList" placeholder="请选择账户" clearable style="width: 240px">
            <el-option v-for="item in upiList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmHandle">取消</el-button>
          <el-button type="primary" @click="requestHandle"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="showAlready" title="已设置账户"  destroy-on-close width="500">
      <el-table :data="alreadyList">
        <el-table-column align="center" label="账户名称" prop="nickName" />
        <el-table-column align="center" label="状态">
          <template #default="scope">
           <div v-if="scope.row.hasUse">启用</div>
           <div v-else>未启用</div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { channelList, channelAdd, channelUpdate, setMerchantRate, deleteMerchantRate, accountList, setUpiList, getUpiList } from "@/api/channel";
const { proxy } = getCurrentInstance();
const data = reactive({
  queryParams: {
    userName: "",
    userCode: "",
    merchantNo: "",
  },
  form: {},
  addForm: {},
  rules: {
    channelName: [
      { required: true, message: "展示渠道名称不能为空", trigger: "blur" },
    ],
    uniName: [
      { required: true, message: "渠道名称不能为空", trigger: "blur" },
    ],
    uniInnerRate: [
      { required: true, message: "渠道收费率不能为空", trigger: "blur" },
    ],
    uniOuterRate: [
      { required: true, message: "渠道付费率不能为空", trigger: "blur" },
    ],
    useStatus: [
      { required: true, message: "渠道状态不能为空", trigger: "change" },
    ],
    merchantId: [
      { required: true, message: "请填入商户id", trigger: "blur" },
    ],
    merchantNo: [
      { required: true, message: "请填入商户编号", trigger: "blur" },
    ],
  },
});
const { queryParams, form, rules, addForm } = toRefs(data);
const total = ref(0);
const show = ref(false)
const title = ref('新增渠道')
const setShow = ref(false)
const accountShow = ref(false)
const upiList = ref([])
const aList = ref([])
const showAlready=ref(false)
const alreadyList = ref([])
// 取消
function confirmHandle() {
  proxy.resetForm("formRef");
  proxy.resetForm("addFormRef");
  show.value = false;
  setShow.value = false;
  accountShow.value = false;
  form.value = {};
  addForm.value = {}
  upiList.value = []
}
const tableData = ref([])
// 获取渠道列表
function getList() {
  channelList().then((res) => {
    tableData.value = res.data
  })
}
const uniChannelId = ref()
// 设置可用商户
function setUse(row) {
  setShow.value = true
  uniChannelId.value = row.uniChannelId
}
// 设置账户
function setAccount(row) {
  accountShow.value = true
  uniChannelId.value = row.uniChannelId
  getAccountList()
}
// 账户列表
function getAccountList() {
  accountList().then((res) => {
    upiList.value = res.data.map((item) => {
      return {
        value: item.upiAccountId,
        label: item.nickName,
      }
    })
  })
}
// 已设置账户
function alreadyHandle(row) {
  
  getUpiList({ uniChannelId: row.uniChannelId }).then((res) => {
    alreadyList.value = res.data
    showAlready.value=true
  })
}
function requestHandle() {
  const data = {
    uniChannelId: uniChannelId.value,
    upiAccountIdList: aList.value
  }
  setUpiList(data).then((res) => {
    ElMessage.success("设置账户成功!");
    getList();
    confirmHandle()
  })
}
// 设置可用商户
function setHandle() {
  proxy.$refs["addFormRef"].validate((valid) => {
    if (valid) {
      const data = {
        merchantNo: addForm.value.merchantNo,
        uniChannelId: uniChannelId.value
      }
      setMerchantRate(data).then((res) => {
        ElMessage.success("设置商户成功!");
        getList();
        confirmHandle()
      })
    }
  })
}
// 删除可用商户
function deleteHandler(row, info) {
  ElMessageBox.confirm(
    '确定删除吗?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const data = {
        merchantNo: row.merchantNo,
        uniChannelId: info.uniChannelId
      }
      deleteMerchantRate(data).then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getList();
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}
// 修改渠道
function modifyHandler(row) {
  title.value = '修改渠道设置';
  const rowData = row;
  show.value = true;
  form.value = rowData;
  form.value.useStatus = rowData.useStatus == 1 ? '启用' : '停用';
}
// 新增通道
function handleAdd() {
  title.value = '新增渠道';
  show.value = true
}
function handleSubmit() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (form.value.uniChannelId) {
        channelUpdate(form.value).then((res) => {
          ElMessage.success("修改成功!");
          getList();
        });
      } else {
        channelAdd(form.value).then((res) => {
          ElMessage.success("新增渠道成功!");
          getList();
        });
      }

      form.value = {};
      show.value = false;
    }
  });
}
getList()
</script>
<style></style>